<template>
  <div>
    <!-- 搜索框 -->
    <van-search disabled placeholder="搜索商品名称" shape="round" ref="van" />
    <div class="box">
      <!-- 一级菜单 -->
      <div class="left" :style="{ height: height + 'px' }" v-if="height">
        <div
          class="leftdiv"
          v-for="(data, index) in OneRank"
          :key="data.id"
          :class="num == index ? 'active' : ''"
          @click="showitem(index)"
        >
          {{ data.name }}
        </div>
      </div>
      <!-- 一级菜单相对应的内容 -->
      <div class="right" :style="{ height: height + 'px' }">
        <div class="rightitem" ref="long" style="top: 0px">
          <!-- 小米手机 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Xiaomi" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img :src="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img :src="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 红米手机 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Redmi" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 游戏手机 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in GamePhone" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 电脑平板 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Computed" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 智能穿戴 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in SmartWearables" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 电视 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in TV" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 大家电 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in BigHomeAppliances" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 小家电 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in SmallHomeAppliances" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 智能家居 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in SmartHome" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 出行运动 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Goto" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 日用百货 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in EveryDay" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 儿童用品 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Child" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 有品精品 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Fien" :key="val.id">
              <p class="goodsTitle">{{ val.name }}</p>
              <template v-if="val.goodslist[0].price">
                <div class="goodsbox">
                  <div
                    class="goodsitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                    @click="addShopCar(data.goodsID)"
                  >
                    <img v-lazy="data.picUrl" class="itemimg" />
                    <div class="text">
                      <p class="p1">{{ data.goodsName }}</p>
                      <p class="p2"><span>￥</span>{{ data.price }}</p>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="elsebox">
                  <div
                    class="elseitem"
                    v-for="data in val.goodslist"
                    :key="data.id"
                  >
                    <img v-lazy="data.picUrl" class="elseimg" />
                    <p>{{ data.goodsName }}</p>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 小米服务 -->
          <div class="itembox" :style="{ height: height + 'px' }">
            <div class="item" v-for="val in Service" :key="val.id">
              <template v-if="val.goodslist.length">
                <p class="goodsTitle">{{ val.name }}</p>
                <template v-if="val.goodslist[0].price">
                  <div class="goodsbox">
                    <div
                      class="goodsitem"
                      v-for="data in val.goodslist"
                      :key="data.id"
                      @click="addShopCar(data.goodsID)"
                    >
                      <img v-lazy="data.picUrl" class="itemimg" />
                      <div class="text">
                        <p class="p1">{{ data.goodsName }}</p>
                        <p class="p2"><span>￥</span>{{ data.price }}</p>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div class="elsebox">
                    <div
                      class="elseitem"
                      v-for="data in val.goodslist"
                      :key="data.id"
                    >
                      <img v-lazy="data.picUrl" class="elseimg" />
                      <p>{{ data.goodsName }}</p>
                    </div>
                  </div>
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, Toast } from 'vant'

Vue.use(Search, Toast)
export default {
  data () {
    return {
      height: 0,
      num: 0,
      OneRank: [],
      Xiaomi: [],
      Redmi: [],
      GamePhone: [],
      Computed: [],
      SmartWearables: [],
      TV: [],
      BigHomeAppliances: [],
      SmallHomeAppliances: [],
      SmartHome: [],
      Goto: [],
      EveryDay: [],
      Child: [],
      Fien: [],
      Service: []
    }
  },
  methods: {
    getOneRank () {
      this.request.get('/OneRank').then((res) => {
        this.OneRank = res.data
      })
    },
    showitem (n) {
      this.num = n
      this.$refs.long.style.top = -(this.num * 566) + 'px'
    },
    getXiaomi () {
      this.request.get('/Goods', { id: 1 }).then((res) => {
        this.Xiaomi = res.data
      })
    },
    getRedmi () {
      this.request.get('/Goods', { id: 2 }).then((res) => {
        this.Redmi = res.data
      })
    },
    getGamePhone () {
      this.request.get('/Goods', { id: 3 }).then((res) => {
        this.GamePhone = res.data
      })
    },
    getComputed () {
      this.request.get('/Goods', { id: 4 }).then((res) => {
        this.Computed = res.data
      })
    },
    getSmartWearables () {
      this.request.get('/Goods', { id: 5 }).then((res) => {
        this.SmartWearables = res.data
      })
    },
    getTV () {
      this.request.get('/Goods', { id: 6 }).then((res) => {
        this.TV = res.data
      })
    },
    getBigHomeAppliances () {
      this.request.get('/Goods', { id: 7 }).then((res) => {
        this.BigHomeAppliances = res.data
      })
    },
    getSmallHomeAppliances () {
      this.request.get('/Goods', { id: 8 }).then((res) => {
        this.SmallHomeAppliances = res.data
      })
    },
    getSmartHome () {
      this.request.get('/Goods', { id: 9 }).then((res) => {
        this.SmartHome = res.data
      })
    },
    getGoto () {
      this.request.get('/Goods', { id: 10 }).then((res) => {
        this.Goto = res.data
      })
    },
    getEveryDay () {
      this.request.get('/Goods', { id: 11 }).then((res) => {
        this.EveryDay = res.data
      })
    },
    getChild () {
      this.request.get('/Goods', { id: 12 }).then((res) => {
        this.Child = res.data
      })
    },
    getFien () {
      this.request.get('/Goods', { id: 13 }).then((res) => {
        this.Fien = res.data
      })
    },
    getService () {
      this.request.get('/Goods', { id: 14 }).then((res) => {
        this.Service = res.data
      })
    },
    // 添加购物车
    addShopCar (goodsID) {
      this.request
        .post('/api/addShopCar', {
          userID: localStorage.getItem('userID'),
          goodsID
        })
        .then((res) => {
          if (res.data.code == 200) {
            Toast.success('添加成功')
          } else {
            Toast.success('添加失败')
          }
        })
    }
  },
  mounted () {
    this.getOneRank()
    this.$nextTick(() => {
      this.height =
        window.innerHeight -
        this.$route.params.height -
        this.$refs.van.offsetHeight
    })
    this.getXiaomi()
    this.getRedmi()
    this.getGamePhone()
    this.getComputed()
    this.getSmartWearables()
    this.getTV()
    this.getBigHomeAppliances()
    this.getSmallHomeAppliances()
    this.getSmartHome()
    this.getGoto()
    this.getEveryDay()
    this.getChild()
    this.getFien()
    this.getService()
  }
}
</script>

<style lang="less" scoped>
.active {
  font-weight: 700;
  border-left: 2px solid red;
}
.box {
  display: flex;
}
.left {
  overflow-y: scroll;
}
::-webkit-scrollbar {
  width: 0.9375rem;
  height: 0.625rem;
}
.leftdiv {
  width: 80px;
  line-height: 46.9px;
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}
.right {
  width: 80%;
  overflow: hidden;
  position: relative;
}
.rightitem {
  position: absolute;
  transition: all 0.5s;
}
.itembox {
  overflow-y: scroll;
}
.item {
  .goodsTitle {
    font-size: 0.855rem;
    font-weight: 700;
    height: 2.05rem;
    line-height: 2.05rem;
  }
  .goodsbox {
    .goodsitem {
      display: flex;
      flex-wrap: wrap;
      .itemimg {
        width: 4.3312rem;
        display: block;
      }
      .text {
        p {
          font-size: 0.855rem;
        }
        .p1 {
          margin: 1.25rem 0 0 0.625rem;
        }
        .p2 {
          margin: 0.625rem 0 0 0.625rem;
          span {
            font-size: 0.75rem;
          }
        }
      }
    }
  }
}
.elsebox {
  display: flex;
  flex-wrap: wrap;
  .elseitem {
    width: 5.4688rem;
    margin: 0.65rem 0 0.9688rem;
    .elseimg {
      display: block;
      width: 3.25rem;
      margin: 0 auto;
    }
    p {
      margin-top: 0.9063rem;
      text-align: center;
      font-size: 0.75rem;
      color: rgba(0, 0, 0, 0.54);
    }
  }
}
</style>
